<template>
<div class="nav">
      <van-swipe class="my-swipe">
        <van-swipe-item v-for="(item, index) in Math.ceil(navList.length / 5)">
          <van-grid :column-num="5" :border="false">
            <van-grid-item
              :icon="subitem.icon"
              :text="subitem.title"
              v-for="subitem in navList.slice(5 * index, 5 * (index + 1))"
            />
          </van-grid>
        </van-swipe-item>
        <template #indicator="{ active, total }">
          <div class="custom-indicator">
            <span
              v-for="(item, index) in total"
              :class="index == active ? 'active' : ''"
              :style="{ width: 100 / total + '%' }"
            ></span>
          </div>
        </template>
      </van-swipe>
      </div>
   
   
</template>

<script>
export default {
  props: ["navList"],
};
</script>

<style scoped lang="less">
.custom-indicator {
  position: absolute;
  right: 5px;
  left: 5px;
  bottom: 5px;
  font-size: 12px;
  width: 20px;
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  span {
    height: 8px;
  }
  span.active {
    background: red;
  }
}
</style>
